<template>
  <div class="global-grid-layout-container scroll-custom">
    <grid-layout
      :layout.sync="boxList"
      :col-num="config.colNum"
      :row-height="config.rowHeight"
      :is-draggable="config.draggable"
      :is-resizable="config.resizable"
      :vertical-compact="config.verticalCompact"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in boxList"
        :key="item.key"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
      >
        <div style="width: 100%;height: 100%" v-loading="item.isLoading">
          <common-error v-if="item.isError" type="failed">
            <el-button v-if="del" slot="tools" type="danger" plain @click="delEChart(item.key)">删除组件</el-button>
          </common-error>

          <title-card :title="item.name" v-else>
            <i slot="header" class="el-icon-close close" @click="delEChart(item.key)" v-if="del"></i>
            <base-chart slot="content" v-show="item.option" ref="chartDom" :resize="`${item.w}_${item.h}`"
                        :option="item.option"></base-chart>
          </title-card>
        </div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
import resize from './mixins/resize'
import BaseChart from '@/components/EChart/components/BaseChart'

export default {
  mixins: [resize],
  name: '',
  components: { GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem, BaseChart },
  props: {
    boxList: {
      type: Array,
      default: () => [
        /* {
           key: '',
           x: '',
           y: '',
           w: '',
           h: '',
           i: '',
           isLoading: false,
           isError:false,
           option: null
         }*/
      ]
    },
    draggable: {
      type: Boolean,
      default: true
    },
    resizable: {
      type: Boolean,
      default: true
    },
    del: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    'boxList': function() {
      console.log('变化了')
    }
  },
  data() {
    return {
      dataList: this.boxList,
      config: {
        colNum: 48,// 定义栅格系统的列数，其值需为自然数
        rowHeight: 30,// 每行的高度，单位像素。
        draggable: this.draggable,
        resizable: this.resizable,
        verticalCompact: true,
        transforms: true
      }
    }
  },
  methods: {
    delEChart(key) {
      let index = this.boxList.findIndex(c => c.key === key)
      if (index !== -1) this.boxList.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.global-grid-layout-container {
  height: 100%;
  overflow-x: auto;

  .chart-error-wrap {
    width: 100%;
    height: 100%;
  }

  .vue-grid-layout {
    height: 100% !important;
  }

  .vue-grid-item:not(.vue-grid-placeholder) {
    border: 1px solid #EBEEF5;
  }

  .close {
    font-size: 20px;
    cursor: pointer;
    z-index: 99;
  }
}

</style>
